<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { useUserStore } from '../stores/auth';

const userStore = useUserStore();

// 简化的状态同步函数，专注于特定事件的同步
const syncAuthState = () => {
  console.log('GlobalAuthSync - 执行事件触发的状态同步');
  
  try {
    const storedToken = localStorage.getItem('userToken');
    const storedUserInfo = localStorage.getItem('userInfo');
    
    if (storedToken) {
      userStore.token = storedToken;
      userStore.isLoggedIn = true;
      
      if (storedUserInfo) {
        try {
          userStore.userInfo = JSON.parse(storedUserInfo);
        } catch (e) {
          console.error('GlobalAuthSync - 解析用户信息失败:', e);
        }
      }
    }
  } catch (error) {
    console.error('GlobalAuthSync - 同步失败:', error);
  }
};

// 初始化时同步一次
onMounted(() => {
  console.log('GlobalAuthSync 组件已挂载');
  
  // 挂载时立即同步一次
  syncAuthState();
  
  // 保留特定事件的监听，避免与App.vue中的全局监听冲突
  // 这些事件在App.vue中可能没有被完全覆盖
  window.addEventListener('focus', syncAuthState);
  window.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
      syncAuthState();
    }
  });
  
  // 监听页面重新加载事件
  window.addEventListener('beforeunload', () => {
    console.log('GlobalAuthSync - 页面即将卸载，确保状态已保存');
    // 这里可以添加额外的状态保存逻辑
  });
});

// 清理监听器
onBeforeUnmount(() => {
  console.log('GlobalAuthSync 组件即将卸载');
  window.removeEventListener('focus', syncAuthState);
  window.removeEventListener('visibilitychange', syncAuthState);
  window.removeEventListener('beforeunload', syncAuthState);
});
</script>

<template>
  <!-- 这个组件不渲染任何内容，仅用于全局认证状态同步 -->
</template>

<style scoped>
/* 无样式 */
</style>